import { ref, reactive } from 'vue'
import { ElTree } from 'element-plus'
import { StatusCode } from '@/http/request'
import { getParentMenuApi } from '@/api/system/menu/menu'
import { MenuModel, SelectNode } from '@/api/system/menu/MenuModel'

export default function useParentMenu() {
    // 树的ref属性
    const parentTree = ref<InstanceType<typeof ElTree>>()
    // 上级树的数据
    const treeData = reactive({
        data: []
    })
    // 选中的数据
    const selectNode = reactive<SelectNode>({
        id: '',
        name: ''
    })
    // 树的属性
    const defaultProps = reactive({
        children: 'children', //设置树的children
        label: 'label' //设置树的名字属性字段
    })

    // 树的点击事件
    const handleNodeClick = (data: MenuModel) => {
        selectNode.id = data.id
        // selectNode.name = data.label
        // console.log(selectNode)
    }
    // 获取树的数据
    const getTreeData = async () => {
        let res = await getParentMenuApi()
        if (res && res.code == StatusCode.Success) {
            treeData.data = res.data
        }
    }
    // 加号和减号的点击事件
    const openBtn = (data: MenuModel) => {
        // data.open = !data.open
        // if (parentTree.value) {
        //     parentTree.value.store.nodesMap[data.id].expanded = !data.open
        // }
    }

    return {
        parentTree,
        treeData,
        defaultProps,
        handleNodeClick,
        getTreeData,
        openBtn,
        selectNode
    }
}
